<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
</head>
<body>
<div>
    <table id="bootstrap-table">
        <thead>
        <tr>
            <th data-field="id">用户ID</th>
            <th data-field="institute">学院</th>
            <th data-field="name">姓名</th>
            <th data-field="username">用户名</th>
            <th data-field="state" data-formatter="fm_state">状态</th>
            <th data-formatter="fm_operate">操作</th>
        </tr>
        </thead>
    </table>
</div>
<div style="margin-left: 45%">
    <a th:href="@{/addUser}">新增用户</a>
</div>
</body>
<div th:replace="common :: common"></div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<!-- Latest compiled and minified Locales -->
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</html>
<script>
    $(function () {
        $('#bootstrap-table').bootstrapTable({
            url: "/userManage",                                   // 请求后台的URL（*）
            method: 'post',
            sidePagination: "client",
            pagination: true,                                   // 是否显示分页（*）
            pageNumber: 1,                                      // 初始化加载第一页，默认第一页
            pageSize: 5,                                        // 每页的记录行数（*）
            pageList: [5, 10],                         // 可供选择的每页的行数（*）
            showRefresh: true,
        });
    })

    function fm_state(value, row, index) {
        return value == true ? '开启' : '禁用';
    }

    function fm_operate(value, row, index) {
        var url = "/editUser?id=" + row.id;
        return '<a href="' + url + '">编辑</a>'
    }

</script>